<template>
  <el-dialog v-model="dialogVisible" :title="`${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
    <div class="video-box">
      <video width="460" height="258" :src="videoSrc" controls></video>
    </div>
    <el-form class="drawer-multiColumn-form" label-width="80px">
      <el-form-item label="视频连接 :">
        <el-input v-model="videoSrc" placeholder="请填写可直接播放的视频地址，建议使用1080p的视频" />
      </el-form-item>
      <el-form-item label="文件上传 :">
        <el-upload
          action="#"
          class="upload"
          :limit="excelLimit"
          :show-file-list="false"
          :http-request="uploadExcel"
          :before-upload="beforeExcelUpload"
          :on-exceed="handleExceed"
          :on-success="excelUploadSuccess"
          :on-error="excelUploadError"
          :accept="parameter.fileType!.join(',')"
        >
          <el-button type="primary">选择文件</el-button>
          <template #tip>
            <slot name="tip">
              <div class="el-upload__tip">支持mp4/avi格式视频，视频小于 {{ parameter.fileSize }}M</div>
            </slot>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class="btnGroup">
      <el-button @click="cancel"> 取消 </el-button>
      <el-button type="primary" @click="uploadHandle"> 确定 </el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="ImportVideo">
import { ref } from "vue";
import { OBSApi } from "@/api/modules";
import { ElNotification, UploadRequestOptions, UploadRawFile } from "element-plus";

export interface ExcelParameterProps {
  title: string; // 标题
  rowData?: any;
  resourceId?: string; // 上传参数
  fileSize?: number; // 上传文件的大小
  fileType?: string[]; // 上传文件的类型
  isNotify?: boolean; // 是否有导出消息提示
  apiParams?: Object; // 上传接口参数
  importApi?: (params: any) => Promise<any>; // 批量导入的Api
  getTableList?: () => void; // 获取表格数据的Api
}

let videoSrc = ref("");

// 是否覆盖数据
// const isCover = ref(false);
// 最大文件上传数
const excelLimit = ref(1);
// dialog状态
const dialogVisible = ref(false);
// 父组件传过来的参数
const parameter = ref<ExcelParameterProps>({
  title: "",
  rowData: {},
  fileSize: 200,
  apiParams: {},
  isNotify: false,
  resourceId: "8",
  fileType: [".mp4", ".avi", ".MP4", ".AVI"],
});

// 接收父组件参数
const acceptParams = (params: ExcelParameterProps) => {
  parameter.value = { ...parameter.value, ...params };
  videoSrc.value = parameter.value.rowData.promotionVideoLink;
  dialogVisible.value = true;
};

// 文件上传
const uploadExcel = async (param: UploadRequestOptions) => {
  let excelFormData = new FormData();
  excelFormData.append("file", param.file);
  excelFormData.append("resourceId", parameter.value.resourceId);
  const data = (await OBSApi.uploadFile(excelFormData)) as any;
  videoSrc.value = data.file_path;
};

/**
 * @description 文件上传之前判断
 * @param file 上传的文件
 * */
const beforeExcelUpload = (file: UploadRawFile) => {
  const FILE_NAME = file.name;
  const isVideo = parameter.value.fileType.includes(FILE_NAME.substring(FILE_NAME.lastIndexOf(".")));
  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
  if (!isVideo)
    ElNotification({
      title: "温馨提示",
      message: "上传文件只能是 mp4 / avi 格式！",
      type: "warning",
    });
  if (!fileSize)
    setTimeout(() => {
      ElNotification({
        title: "温馨提示",
        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
        type: "warning",
      });
    }, 0);
  return isVideo && fileSize;
};

// 文件数超出提示
const handleExceed = () => {
  ElNotification({
    title: "温馨提示",
    message: "最多只能上传一个文件！",
    type: "warning",
  });
};

// 上传错误提示
const excelUploadError = () => {
  ElNotification({
    title: "温馨提示",
    message: `文件上传失败，请您重新上传！`,
    type: "error",
  });
};

// 上传成功提示
const excelUploadSuccess = () => {
  console.log("上传obs成功");
};

const cancel = () => {
  dialogVisible.value = false;
  videoSrc.value = "";
};

const uploadHandle = async () => {
  if (!videoSrc.value) {
    ElNotification({
      title: "温馨提示",
      message: "请上传文件！",
      type: "warning",
    });
    return;
  }
  let newParams = { promotionVideoLink: videoSrc.value, ...parameter.value.apiParams };
  await parameter.value.importApi!(newParams);
  parameter.value.getTableList && parameter.value.getTableList();
  dialogVisible.value = false;
  ElNotification({
    title: "温馨提示",
    message: `上传${parameter.value.title}成功！`,
    type: "success",
  });
};

defineExpose({
  acceptParams,
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
